<template>
    <div>
        <div class="ccc">
            <div class="mui-card" v-for="item in car" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch v-model="item.selected" @click="change(item.id)"></mt-switch>
                        <img :src="'./components/photos/'+item.id+'/'+item.id+'.png'">
                        <span class="detail">
                            <h4>{{item.name}}</h4>
                            <span>{{'￥'+item.price}}</span><numberbox :value="item.count" :id='item.id'></numberbox>
                        </span>
					</div>
				</div>
			</div>
        </div>
        <div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner rale">
                    <span>
                        <span>总计(不含运费)</span><br>
                        <span>{{'已勾选商品'+$store.getters.getnum+'件 共'+'￥'+$store.getters.getprice}}</span>
                    </span>
					<mt-button style="small" type='danger' class="float">立马支付</mt-button>
				</div>
			</div>
		</div>
        
    </div>
</template>

<script>
import numberbox from './number.vue'
export default {
    data(){
        return{
            car: this.$store.getters.getcar,
            price:0
        }
    },
    created(){
        this.sum()
    },
    methods:{
        change(id){
            var trans = {}
            this.car.some(item => {
                if (item.id == id){
                    trans.selected = !item.selected
                    return true
                }
            });
            this.$store.commit('switch',trans) 
        },
        sum(){
            this.car.forEach(item => {
                if (item.selected) {
                    this.price += item.count * item.price
                }
            })
        }
    },
    components:{
        'numberbox': numberbox
    }

}
</script>

<style scoped>
.ccc{
    background-color: #ccc;
    overflow: hidden;
}
.ccc img {
    height: 50px;
    width: 55px;
}
.ccc .mui-card-content-inner{
    display: flex;
}
.rale{
    position: relative;
}
.float{
    position: absolute;
    top: 16px;
    right: 5px;
}
</style>